<template>
	<div class="wrapper">
		<h2 class="header">{{data.name}}</h2>
		<scroll-view class='scroll-warpper' :scrollX="true">
			<div class="item-container" v-for="item in data.data">
				<router-link :to="'/goodsDetail/' + item.goods_id + '/story'" class='item-content'>
					<div class="img-contant">
						<img :src="item.goods_image1" />
						<div class="goods-tag">
							<span class="label" v-if="item.goods_label_text">{{item.goods_label_text}}</span>
							<div class="price-content">
								<em class="icon-circle"></em>
								<span class="price">￥{{item.goods_price}}</span>
							</div>
						</div>
					</div>
					<div class="text-intro">
						<span class="title">{{item.goods_name}}</span>
						<span class="type">{{item.goods_jingle}}</span>
					</div>
				</router-link>
			</div>
		</scroll-view>
	</div>
</template>

<script>
	import ScrollView from '@/base/scroll-view/scroll-view'
	export default {
		props: {
			data: {
				type: Object,
				require: true
			}
		},
		components: {
			"scroll-view": ScrollView
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		.header {
			color: #4A4A4A;
			font-size: 40px;
			margin-bottom: 40px;
		}
		.scroll-warpper {
			.item-container {
				float: left;
				.item-content {
					display: block;
					width: 470px;
					margin: 20px;
					background-color: #FFFFFF;
					border: 2px solid rgba(0, 0, 0, 0.2);
					box-shadow: 0 0 80px 0 rgba(0, 0, 0, 0.05);
					border-radius: 8px;
					.img-contant {
						position: relative;
						width: 470px;
						height: 400px;
						margin-bottom: 25px;
						img {
							display: block;
							width: 470px;
							height: 400px;
							border-radius: 8px;
						}
						.goods-tag {
							display: flex;
							flex-direction: column;
							position: absolute;
							right: -10px;
							bottom: 0;
							.label {
								height: 56px;
								background-color: #ef364e;
								color: #FFFFFF;
								font-size: 28px;
								text-align: center;
								line-height: 56px;
							}
							.price-content {
								display: flex;
								align-items: center;
								height: 56px;
								padding: 0 20px;
								background-color: #000;
								.icon-circle {
									flex-shrink: 0;
									width: 10px;
									height: 10px;
									border: 2px solid #f00;
									border-radius: 50%;
									margin-right: 10px;
								}
								.price {
									color: #fff;
									font-size: 26px;
								}
							}
						}
					}
				}
				.text-intro {
					display: flex;
					flex-direction: column;
					padding: 0 30px 40px;
					.title {
						overflow: hidden;
						margin-bottom: 14px;
						height: 40px;
						font-size: 32px;
						color: #454553;
						line-height: 40px;
						text-overflow: ellipsis;
					}
					.type {
						font-size: 28px;
						color: #9b9b9b;
						line-height: 40px;
						height: 80px;
						overflow: hidden;
					}
				}
			}
		}
	}
</style>